<template>
  <div class="normal">
    <h3>官方榜</h3>
    <ul class="content">
      <li v-for="item in data" :key="item.id" class="item" @click="$router.push('/rank/'+item.id)">
        <div class="left">
        <img :src='item.coverImgUrl' v-lazy='item.coverImgUrl' alt="">
        <span>{{item.update}}</span>
        </div>
        <ol class="right">
          <li v-for="(track,index) in item.tracks" :key="index">
            <span>{{index+1}} . </span>
            <span>{{track.first}} - {{track.second}}</span>
          </li>
        </ol>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:{
    data:Array,
  }
}
</script>
 
<style lang = "scss" scoped>
@import '../../assets/global-style.scss';
.normal{
  padding: 5px;
}
  h3{
    font-size: 16px;
    font-weight: 700;
    padding: 5px 0;
  }
.content{
  .item{
    display:flex;
    height: 110px;
    padding: 5px 0;
    border-bottom: 1PX solid $border-color;
    .left{
      position: relative;
      img{
        width: 110px;
        border-radius: 3px;
      }
      span{
        height: 30%;
        width: 100%;
        background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(110, 110, 110, 0.4));;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 15px 0 0 7px;
        box-sizing: border-box;
        color: #fff;
      }
    }
    .right{
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      margin-left: 10px;
      color: #808080;
    }
  }
}
</style>
